<template>
  <el-main class="transaction-container">
    <div class="table-operations">
      <el-button type="primary" @click="handleAdd">添加记录</el-button>
    </div>
    
    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-top: 10px;"
    >
      <el-table-column prop="date" label="日期" width="150" />
      <el-table-column prop="operation" label="操作" width="120">
        <template #edit="scope">
          <el-select v-model="scope.row.operation" placeholder="请选择">
            <el-option label="买入" value="买入" />
            <el-option label="卖出" value="卖出" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="金额" width="120" />
      <el-table-column prop="cash" label="现金" width="120" />
      <el-table-column prop="fund" label="基金" width="120" />
      <el-table-column prop="total" label="总额" width="120" />
      <el-table-column prop="returnRate" label="收益率" width="120" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog v-model="dialogVisible" title="编辑交易记录">
      <el-form :model="form" label-width="100px">
        <el-form-item label="日期">
          <el-date-picker v-model="form.date" type="date" />
        </el-form-item>
        <el-form-item label="操作">
          <el-select v-model="form.operation" placeholder="请选择">
            <el-option label="买入" value="买入" />
            <el-option label="卖出" value="卖出" />
          </el-select>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="form.amount" type="number" />
        </el-form-item>
        <el-form-item label="现金">
          <el-input v-model="form.cash" type="number" />
        </el-form-item>
        <el-form-item label="基金">
          <el-input v-model="form.fund" type="number" />
        </el-form-item>
        <el-form-item label="总额">
          <el-input v-model="form.total" type="number" />
        </el-form-item>
        <el-form-item label="收益率">
          <el-input v-model="form.returnRate" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>
  </el-main>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 表格数据
const tableData = ref([
  {
    date: '2023-01-10',
    operation: '买入',
    amount: 5000,
    cash: 25000,
    fund: 15000,
    total: 40000,
    returnRate: '0%'
  },
  {
    date: '2023-02-15',
    operation: '卖出',
    amount: 3000,
    cash: 28000,
    fund: 12000,
    total: 40000,
    returnRate: '2%'
  },
  {
    date: '2023-03-20',
    operation: '买入',
    amount: 6000,
    cash: 22000,
    fund: 18000,
    total: 40000,
    returnRate: '5%'
  },
  {
    date: '2023-04-25',
    operation: '买入',
    amount: 4000,
    cash: 18000,
    fund: 22000,
    total: 40000,
    returnRate: '8%'
  }
])

// 对话框相关
const dialogVisible = ref(false)
const form = reactive({
  date: '',
  operation: '',
  amount: '',
  cash: '',
  fund: '',
  total: '',
  returnRate: ''
})
const currentIndex = ref(-1)

// 添加记录
const handleAdd = () => {
  // 重置表单
  Object.keys(form).forEach(key => {
    form[key] = ''
  })
  currentIndex.value = -1
  dialogVisible.value = true
}

// 编辑记录
const handleEdit = (index, row) => {
  // 复制当前行数据到表单
  Object.keys(form).forEach(key => {
    form[key] = row[key]
  })
  currentIndex.value = index
  dialogVisible.value = true
}

// 删除记录
const handleDelete = (index, row) => {
  tableData.value.splice(index, 1)
  ElMessage.success('记录已删除')
}

// 保存记录
const handleSave = () => {
  // 简单验证
  if (!form.date || !form.operation || !form.amount || !form.cash || !form.fund || !form.total) {
    ElMessage.warning('请填写完整信息')
    return
  }
  
  if (currentIndex.value === -1) {
    // 添加新记录
    tableData.value.push({ ...form })
    ElMessage.success('记录已添加')
  } else {
    // 更新现有记录
    tableData.value[currentIndex.value] = { ...form }
    ElMessage.success('记录已更新')
  }
  
  dialogVisible.value = false
}
</script>

<style scoped>
.transaction-container {
  padding: 20px;
}

.table-operations {
  margin-bottom: 10px;
}
</style>
    